{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogindexpage{% endblock %}

{% block content %}

        <h1 class="mt-2">{{ page.title }}</h1>

        <!-- <div class="intro">{{ page.intro|richtext }}</div> -->

        {% for post in blogpages %}
            {% with post=post.specific %}

                <div class="card mb-2">
                    <h4 class="card-header"><a href="{% pageurl post %}">{{ post.title }}</a></h4>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-auto mr-auto">

                                {% if post.intro %}
                                    {{ post.intro|richtext }}
                                {% else %}
                                    {{ post.body|richtext|truncatewords_html:80 }}
                                {% endif %}

                                <a href="{% pageurl post %}" class="btn btn-primary mt-2 mb-2">阅读全文</a>
                            </div>
                            <div class="col-auto">
                                {% with post.main_image as main_image %}
                                    {% if main_image %}
                                        <a href="{% pageurl post %}">
                                            {% image main_image fill-160x100 %}
                                        </a>
                                    {% endif %}
                                {% endwith %}
                            </div>
                        </div>

                    </div>
                </div>

            {% endwith %}
        {% endfor %}

        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if blogpages.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ blogpages.previous_page_number }}">&laquo;</a>
                    </li>
                {% endif %}
                {% for page_num in blogpages.paginator.page_range %}
                    <li {% if page_num == blogpages.number %} class="active page-item"{% endif %}>
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                {% endfor %}
                {% if blogpages.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ blogpages.next_page_number }}">&raquo;</a>
                    </li>
                {% endif %}
            </ul>
        </nav>

        <hr>

{% endblock %}